<template>
  <div>
    <template v-for="menu in this.menuData">
      <el-submenu :key="menu.primaryKey" :index="menu.primaryKey" v-if="menu.children">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title" class="font-size-16">{{ menu.name }}</span>
        </template>
        <menu-tree :menuData="menu.children"></menu-tree>
      </el-submenu>
      <el-menu-item :key="menu.primaryKey" :index="menu.primaryKey" @click="menuClick(menu)" v-else>
        <i :class="menu.icon"></i>
        <span slot="title" class="font-size-16">{{ menu.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
  import Bus from '@js/bus.js';

  export default {
    props: ['menuData'],
    name: 'MenuTree',
    methods: {
      menuClick(menu) {
        Bus.$emit('menuData', menu);
      },
    },
  };
</script>
